<template>
  <div class="container">
      <!-- <img src="https://picsum.photos/id/870/200/300?grayscale&blur=2" alt="" srcset="" v-show="blean1">
        <img src="https://picsum.photos/200/300.jpg" alt="" srcset="" v-show="blean2"> -->
     <img :src="imgSrc" alt="" v-show="kaiguan">
     <img :src="imgSrc1" alt="" v-show="!kaiguan">
      <button id="btn" @click="fun" v-text="kai"></button>
      <button id="btn1" @click="fun1" v-text="kai"></button>
  </div>
</template>

<script>
//import imgSrc from './imges/guan.gif'
export default {
  data() {
    return {
        kai:"开灯",
        imgSrc:require('./imges/guan.gif'),
        imgSrc1:require('./imges/kai.gif'),
        kaiguan:true
    }
  },
  methods:{
      fun:function(){
          this.kaiguan=!this.kaiguan,
          this.kai=this.kai=="开灯"?"关灯":"开灯"
      },

      fun1:function(){
          if(this.kai=="开灯"){
              this.kai="关灯"
              this.imgSrc=require('./imges/kai.gif')
          }else{
               this.kai="开灯"
              this.imgSrc=require('./imges/guan.gif')
          }
      }
  },
  
}
</script>

<style scoped>

</style>
